<template>
  <div id="home">
    <div class="title">HUA-WMS</div>
    <div class="username">用户: {{ nowUser }}</div>
    <!-- 收货标题 -->
    <van-divider
      :style="{
        color: '#1989fa',
        borderColor: '#1989fa',
        padding: '0 16px',
        fontSize: '16px',
      }"
    >
      收货入库
    </van-divider>
    <!-- 收货子选项 宫格 -->
    <van-grid :column-num="3" clickable>
      <template v-for="item in tokeSome">
        <van-grid-item
          v-if="item.hasOwnProperty('to')"
          :text="item.name"
          :key="item.name"
          :to="item.to"
          ><!-- 子选项的图标 -->
          <template slot="icon">
            <icon-svg :icon-class="item.icon" size="2rem" />
          </template>
        </van-grid-item>
      </template>
    </van-grid>
    <!-- 发货标题 -->
    <van-divider
      :style="{
        color: '#1989fa',
        borderColor: '#1989fa',
        padding: '0 16px',
        fontSize: '16px',
      }"
    >
      发货出库
    </van-divider>
    <!-- 发货子选项 宫格 -->
    <van-grid :column-num="3" clickable>
      <template v-for="item in giveSome">
        <van-grid-item
          v-if="item.hasOwnProperty('to')"
          :text="item.name"
          :key="item.name"
          :to="item.to"
        >
          <template slot="icon">
            <icon-svg :icon-class="item.icon" size="2rem" />
          </template>
        </van-grid-item>
        <template v-else-if="item.hasOwnProperty('children')">
          <van-grid-item
            :text="item.name"
            :key="item.name"
            @click="handleSubNavs(item.children)"
          >
            <template slot="icon">
              <icon-svg :icon-class="item.icon" size="2rem" />
            </template>
          </van-grid-item>
        </template>
      </template>
    </van-grid>
    <!-- 其他选项 -->
    <van-divider
      :style="{
        color: '#1989fa',
        borderColor: '#1989fa',
        padding: '0 16px',
        fontSize: '16px',
      }"
    >
      其他选项
    </van-divider>
    <van-grid class="other" :column-num="3" clickable>
      <template v-for="item in navs">
        <van-grid-item
          v-if="item.hasOwnProperty('to')"
          :text="item.name"
          :key="item.name"
          :to="item.to"
        >
          <template slot="icon">
            <icon-svg :icon-class="item.icon" size="2rem" />
          </template>
        </van-grid-item>
        <template v-else-if="item.hasOwnProperty('children')">
          <van-grid-item
            :text="item.name"
            :key="item.name"
            @click="handleSubNavs(item.children)"
          >
            <template slot="icon">
              <icon-svg :icon-class="item.icon" size="2rem" />
            </template>
          </van-grid-item>
        </template>
      </template>
    </van-grid>
    <van-action-sheet
      v-model="subNavsVisible"
      :actions="subNavs"
      @select="subNavSelected"
    />
    <van-button ref="btn" class="btn" type="warning" @click="connectPrint"
      >连接打印机</van-button
    >
    <van-button block class="logout" @click="Back">退出</van-button>
  </div>
</template>

<script>
import { Grid, GridItem, ActionSheet } from "vant";
import cookie from "cookie_js";
export default {
  name: "Home",
  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [ActionSheet.name]: ActionSheet,
  },
  data() {
    return {
      nowUser: JSON.parse(localStorage.getItem("username")),
      subNavsVisible: false,
      subNavs: [],
      tokeSome: [
        { name: "STO收货", icon: "yijinchang", to: "/warehousing/1" },
        { name: "PO收货", icon: "zhifubuliang", to: "/putinstorage/2" },
        { name: "生产退库", icon: "quanbupaiche", to: "/backhouse/3" },
        { name: "STO临时收货", icon: "daipaiche", to: "/temporary/4" },
      ],
      giveSome: [
        { name: "STO发货", icon: "yichuchang", to: "/selfdelivery/5" },
        { name: "生产出库", icon: "yiguoqipaiche", to: "/receivestuff/6" },
        { name: "PO退货", icon: "yipaiche", to: "/returngoods/7" },
      ],
      navs: [
        { name: "商品上架", icon: "shangcheng", to: "/putonshelves/8" },
        // { name: "仓库盘存", icon: "daizhifu", to: "/stocktaking/9" },
        { name: "状态转移", icon: "qiyegou", to: "/stateadjust/10" },
        // { name: "数量调整", icon: "renwu", to: "/numberadjust/11" },
        { name: "整拍打印", icon: "dayin", to: "/Print" },
      ],
    };
  },
  methods: {
    handleSubNavs(children) {
      this.subNavs = children;
      this.subNavsVisible = true;
    },
    subNavSelected(action, index) {
      this.subNavsVisible = false;
      this.$router.push(this.subNavs[index].to);
    },
    Back() {
      this.$router.replace("/login");
      localStorage.removeItem("userid");
      localStorage.removeItem("username");
      cookie.remove("username");
    },
    listBluetoothDevices() {
      let _this = this;
      window.BTPrinter.list(
        function (data) {
          window.BTPrinter.connect(
            function () {
              _this.$toast({
                message: "连接成功",
                position: "top",
              });
              _this.$refs.btn.innerHTML = "连接打印机";
              localStorage.setItem("printMsg", "已连接");
            },
            function () {
              _this.$toast({
                message: "连接失败",
                position: "top",
              });
              _this.$refs.btn.innerHTML = "连接打印机";
              localStorage.setItem("printMsg", "未连接");
            },
            data[0]
          );
        },
        function () {
          _this.$refs.btn.innerHTML = "连接打印机";
        }
      );
    },
    connectPrint() {
      this.$refs.btn.innerHTML = "正在连接..";
      setTimeout(() => {
        this.listBluetoothDevices();
      }, 500);
    },
  },
};
</script>

<style scoped lang="less">
#home {
  padding-top: 11vh;
  .logout {
    font-size: 1.1rem;
    background-color: #dd524d;
    position: fixed;
    bottom: 0;
  }
}
.van-grid-item__content {
  padding: 0.75rem !important;
}
.other {
  display: flex;
  justify-content: space-evenly;
}
.title {
  position: absolute;
  top: 0;
  text-indent: 1rem;
  width: 100%;
  height: 2.8rem;
  line-height: 2.8rem;
  font-size: 1.5rem;
  background-color: #1e9fff;
  color: #fff;
}
.username {
  position: absolute;
  top: 0.55rem;
  right: 0.5rem;
  font-size: 1.2rem;
  color: #fff;
}
.btn {
  width: 8rem;
  position: relative;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
</style>
